<template>
  <div class="userInfo">
      <div class="accoutBox vux-1px-b" @click="selectAccount">
        <x-img :src="currentImg"></x-img>
        <div class="accout">
          <div>
            <h3 v-text="currentAccoutName"></h3>
            {{currentNum}}
          </div>
        </div>
        <x-icon type="ios-arrow-right" size="30"></x-icon>
      </div>
      <div class="getMoneyBox vux-1px-b">
        <div>提现金额（免手续费）</div>
        <div id="typeMoney">
            <input type="text" v-model="money" id="getMoney" @input="getMoney" @blur="isEoungh">
            <div class="inputClose1" v-if="showClose" @click="clean">
              <span class="inClose"></span>
            </div>
            <span id="yuanUnit">￥</span>
        </div>
      </div>
      <div id="showMoney">
        <div>
          可提余额：<span>{{this.accout.yue|negativeNum}}元</span>
        </div>
        <a @click="allMoney" style="color:#5d7cf1">全部提现</a>
      </div>
      <div v-transfer-dom>
      <popup v-model="show">
        <div class="accountPopupRow vux-1px-b" v-if="this.accout.bank" @click="change(1)">
          <img :src="banks[accout.bank.bankName]">
          <div>
            <h3 v-text="accout.bank.bankName"></h3>
            {{hideBank(this.accout.bank.bankNum)}}  
          </div>
        </div>
        <div class="accountPopupRow vux-1px-b" v-if="this.accout.alipay" @click="change(2)">
          <img src="../../../../../static/assets/zhifubao.png">
          <div>
            <h3>支付宝</h3>
            {{hideAlipay(this.accout.alipay.alipayNum)}}  
          </div>
        </div>
      </popup>
    </div>
    <toast 
      v-model="showPositionValue" 
      type="text" 
      :time="2000" 
      is-show-mask 
      :text="msg" 
      position="middle"></toast>
  </div>
</template>
<script>
import { XImg,Popup,TransferDom,Toast } from 'vux'
import LoginInput from '../../../component/common/LoginInput'
import {getBindInfo} from '../../../../service/getData.js'
import {getStore} from '../../../../config/mUtils'
import { log } from 'util';
import {BANKS} from '../../../../service/getData.js'
import {showMsg} from '../../../../config/mUtils'

export default {
  components:{
    XImg,
    LoginInput,
    Popup,
    Toast
  },
  filters:{
    negativeNum(val){
      if(val == '-0.00'){
        val = '0.00'
      }
      return val
    }
  },
  created(){
    getBindInfo(getStore('loginkey'))
      .then(res=>{
        // //console.log(res)
        if(res.status == 1){
          this.accout = res
          if(res.bank){
            this.currentImg = BANKS[res.bank.bankName]
            this.currentAccoutName = res.bank.bankName
            this.currentNum = this.hideBank(res.bank.bankNum)
            this.$emit('getType','bank')
          }else{
            this.currentImg = '../../../../../static/assets/zhifubao.png'
            this.currentAccoutName = '支付宝'
            this.currentNum = this.hideAlipay(res.alipay.alipayNum)
            this.$emit('getType','alipay')
          }
        }
      }
    )
  },
  data(){
    return {
      money:'',
      showClose:false,
      show:false,
      accout:{},
      currentImg:'',
      currentAccoutName:'',
      currentNum:'',
      banks:BANKS,
      msg:'',
      showPositionValue:false,

    }
  },
  // filters:{
  //   hideBank(val){
  //     return val.replace(/(\w{4})[^\n]*(\w{4})/,'$1 **** **** $2')
  //   },
  //   hideAlipay(val){
  //     return val.replace(/([^\n]{3})[^\n]*([^\n]{3})/,'$1****$2')
  //   }
  // },
  methods:{
    isEoungh(){
      if(this.money > Number(this.accout.yue)){
        showMsg('可提现余额不足',this)
        this.money = ''
      }
    },
    hideBank(val){
      return val.replace(/(\w{4})[^\n]*(\w{4})/,'$1 **** **** $2')
    },
    hideAlipay(val){
      return val.replace(/([^\n]{3})[^\n]*([^\n]{3})/,'$1****$2')
    },
    change(type){
      switch(type){
        case 1:
          this.show = false
          this.currentImg = BANKS[res.bank.bankName]
          this.currentAccoutName = this.accout.bank.bankName
          this.currentNum = this.hideBank(this.accout.bank.bankNum)
          this.$emit('getType','bank')
        break;
        case 2:
          this.show = false
          this.currentImg = '../../../../../static/assets/zhifubao.png'
          this.currentAccoutName = '支付宝'
          this.currentNum = this.hideAlipay(this.accout.alipay.alipayNum)
          this.$emit('getType','alipay')
        break;
      }
    },
    getMoney(){
      this.$emit('getMoney',this.money)
    },
    clean(){
      this.money = '';
      this.showClose = false
    },
    allMoney(){
      if(Number(this.accout.yue)==0){
        showMsg('可提现金额为0',this)
      }else{
        this.money = this.accout.yue
        this.$emit('getMoney',parseInt(this.money))
      }
    },
    selectAccount(){
      this.show = true
    }
  },
  watch:{
    money:function(){
      if(this.money.length > 0){
        this.showClose = true
      }
    }
  },
  directives: {
    TransferDom
  },
}
</script>
<style lang="less">
  @import '../../../../style/mixin.less';
  .vux-x-icon {
    fill: #a8a9ae;
  }
  .userInfo{
    margin: 0 auto;
    box-shadow:2px 2px 10px #aaa;
    padding: 0 0.56rem;
    .bs;
    .wh(9.28rem,5.6533rem);
    .accoutBox{
      .wh(100%,2rem);
      // .bg(yellow);
      .fx(row,flex-start,center);
      img{
        .wh(0.8533rem,0.8533rem);
        margin-right: 0.2933rem;
      }
      .accout{
        display: inline-block;
        margin-right: 1rem;
        width:6rem;
      }
    }
    .getMoneyBox{
      .wh(100%,2.3rem);
      .fx(column,space-around,flex-start);
      .sc(0.4267rem,#939393);
      // .bg(green);
      #typeMoney{
        .inputClose1{
          width: .44rem;
          height: .44rem;
          display: inline-block;
          background-color: #e6e6e6;
          border-radius: 50%;
          position: absolute;
          top: 60%;
          right: 1%;
          .inClose{
            position: absolute;
            left: 25%;
            top:45%;
            width:0.2rem;
            height:1px;
            background: #fff;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            display: inline-block;
          }
          .inClose::after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width:0.2rem;
            height:1px;
            background: #fff;
            -webkit-transform: rotate(270deg);
            -moz-transform: rotate(270deg);
            -o-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            transform: rotate(270deg);
          }
        }
        #yuanUnit{
          .sc(.7rem,#000);
          .allcover();
          top:1rem;
          left: 0;
          width: .6rem;
        }
        #getMoney{
          .wh(8.1rem,1.12rem);
          .sc(0.7rem,#000);
          font-weight: bold;
          border: 1px solid transparent;
          outline:none;
          padding-left: .7rem;
          .bs();
        }
      }
    }
    #showMoney{
      .wh(8.1rem,1.1733rem);
      .sc(.4rem,#939393);
      .fx(row,space-between,center);
    }
  }
  .vux-popup-dialog{
    // .wh(100%,4.6667rem) !important;
    .bg(#fff) !important;
    .accountPopupRow{
      .bs();
      .wh(100%,2rem);
      .fx(row,flex-start);
      padding-left: 0.4rem;
      img{
        .wh(0.8667rem,0.8667rem);
        margin-right: 0.2667rem;
      }
    }
  }
  .weui-toast,.weui-toast_text,.vux-toast-middle{
        width: 70% !important;
      }
</style>
